<template>
    <div class="w100_ h100_ pd20 flex-column">
        <el-descriptions title="我的资料" column="2" v-if="obj.u">
            <el-descriptions-item label="登录账号：" min-width="50%">{{ obj.u.uname }}</el-descriptions-item>
            <el-descriptions-item label="账号密码：" min-width="50%">{{ obj.u.pass }}</el-descriptions-item>
            <el-descriptions-item label="姓名：" min-width="50%">{{ obj.u.name }}</el-descriptions-item>
            <el-descriptions-item label="部门：" min-width="50%">
                <el-tag size="small" v-for="v in (obj.u.dept_name=='局长'?obj.depts:obj.u.dept_name.split(','))" :key="v" class="ml5">{{ v }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="职务：" min-width="50%">
                <el-tag size="small">{{ proxy.$setting.globalData.ranks[obj.u.rank].name }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="权限：" min-width="50%">
                <!-- <el-button class="mr5" size="small" round @click="obj.showflag=!obj.showflag">{{ obj.showflag?'隐藏':'显示' }}</el-button> -->
                <el-tag :style={opacity:obj.showflag?1:0} size="small" v-for="v in obj.u.flag" :key="v" class="ml5">{{ v }}</el-tag>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, computed, onMounted } from 'vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        u: null,
        showflag: true,
        depts: []
    })

    onMounted(async() => {
        obj.u = localStorage.getItem('user')?JSON.parse(localStorage.getItem('user')):{}
        obj.u.flag = (proxy.$setting.globalData.flags.filter(e=>obj.u.flag.split('').includes(e.id))).map(e=>e.name)
        const depts = await proxy.$setting.getdepts()
        obj.depts = depts.map(e=>e.name)
    })
</script>

<style scoped>
</style>

